<#assign propsJson="${propsJson}"?eval />
<template>
  <div>
    <div :style="{...styles, ...backStyles, textShadow: textShadowStr}">${(propsJson.fontText)!(propsJson.fonttext)!""}</div>
    <p :style="{...styles, ...fontStyles}">${(propsJson.fontText)!(propsJson.fonttext)!""}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      styles: {
        color: <#if propsJson.fontGradient??>"${propsJson.fontGradient.show?string("transparent", (propsJson.fontColor)!(propsJson.fontcolor)!'rgb(255, 255, 255)')}"<#else>"${(propsJson.fontColor)!(propsJson.fontcolor)!'rgb(255, 255, 255)'}"</#if>,
        fontSize: "${(propsJson.fontSize)!(propsJson.fontsize)!16}px",
        fontFamily: "${(propsJson.fontFamily)!'initial'}",
        letterSpacing: "${(propsJson.fontSpacing)!'0'}px",
        textAlign: "${(propsJson.fontHorizonAlign)!(propsJson.fontposition)!'left'}",
      <#if propsJson.fontStyles??>
        fontWeight: "${propsJson.fontStyles?seq_contains("bold")?string("bold", "normal")}",
        fontStyle: "${propsJson.fontStyles?seq_contains("italic")?string("italic", "normal")}",
        textDecoration: "${propsJson.fontStyles?seq_contains("underline")?string("underline", "none")}",
      <#elseif propsJson.fontalign??>
        fontWeight: "${propsJson.fontalign?seq_contains("bold")?string("bold", "normal")}",
        fontStyle: "${propsJson.fontalign?seq_contains("italic")?string("italic", "normal")}",
        textDecoration: "${propsJson.fontalign?seq_contains("underline")?string("underline", "none")}",
      </#if>
        padding: "${(propsJson.paddingTop)!'0'}px ${propsJson.paddingRight!'0'}px ${(propsJson.paddingBottom)!'0'}px ${(propsJson.paddingLeft)!'0'}px",
      },
      backStyles: {
        position: "absolute",
        inset: 0,
      <#if propsJson.backImage?? && (propsJson.backImage?length>0) > 
        backgroundImage: "url(" + require('./${resourcePath}/${propsJson.backImage}') + ")",
      <#elseif propsJson.backDefaultImageName?? && (propsJson.backDefaultImageName?length>0) >
        backgroundImage: "url(" + require('./${resourcePath}/${propsJson.backDefaultImageName}') + ")",
      <#elseif propsJson.backimage?? && (propsJson.backimage?length>0)>
        backgroundImage: "url(" + require('./${resourcePath}/${propsJson.backimage}') + ")",
      </#if>
        backgroundSize: <#if propsJson.backShowImage??>"${propsJson.backShowImage?string("100% 100%", "0")}"<#else>"100% 100%"</#if>,
        backgroundRepeat: "no-repeat",
        borderRadius: "${(propsJson.backRadius)!'1'}px",
      },
      fontStyles: {
        position: "relative",
        zIndex: 10,
      <#if propsJson.fontGradient??>
        backgroundImage: "${propsJson.fontGradient.show?string("linear-gradient(${propsJson.fontGradient.angle}deg, ${propsJson.fontGradient.fromColor}, ${propsJson.fontGradient.toColor})", "linear-gradient(${(propsJson.fontColor)!(propsJson.fontcolor)!'rgb(255, 255, 255)'}, ${(propsJson.fontColor)!(propsJson.fontcolor)!'rgb(255, 255, 255)'})")}",
        "-webkit-background-clip": "text", 
        "-webkit-text-fill-color": "${propsJson.fontGradient.show?string("transparent", "${(propsJson.fontColor)!(propsJson.fontcolor)!'#fff'}")}"
      </#if>
      }
    }
  },
  computed: {
    textShadowStr() {
      let offsetDirectionArr = [
        [-1, -1],
        [-1, 1],
        [1, -1],
        [1, 1],
      ] // 四个偏移方向
      let offset = 1 // 偏移量
      let color = <#if propsJson.fontShadow??>"${propsJson.fontShadow.show?string("${propsJson.fontShadow.color}", "transparent")}"<#else>"transparent"</#if>
      return offsetDirectionArr
        .map(v => {
          return v.map(t => t * offset + "px").join(" ") + " ${(propsJson.fontShadow.size)!0}px " + color
        })
        .join()
    },
  },
}
</script>

<style scoped>
/* 引入字体 */
@import url("./${resourcePath}/font.css")
</style>
